<template>
    <el-dialog v-model="show" :title="title" :width="width" center :top="top" :close-on-click-modal="false">
        <slot></slot>
        <template #footer v-if="showFooter">
            <div class="dialog-footer">
                <el-button v-if="showCancel" @click="show = false">取消</el-button>
                <el-button type="primary" @click="handleComfir">
                    {{ confirmText }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { defineComponent, ref, reactive, nextTick, onMounted, toRaw, toRefs, watch } from 'vue'
export default defineComponent({
    props: {
        width: {
            type: String,
            default: () => '90%'
        },
        title: {
            type: String,
            default: () => '90%'
        },
        top: {
            type: String,
            default: () => '80%'
        },
        showFooter: {
            type: Boolean,
            default: () => true
        },
        showCancel: {
            type: Boolean,
            default: () => true
        },
        confirmText: {
            type: String,
            default: () => '確認'
        }
    },
    setup(props, { emit }) {
        const show = ref(false)
        const open = () => {
            show.value = true
        }
        const close = () => {
            show.value = false
        }
        const handleComfir = () => {
            emit('handleComfir')
        }
        return {
            show,
            open,
            close,
            handleComfir
        }
    }
})
</script>
<style scoped lang='scss'>
.dialog-footer {
    display: flex;
    width: 100%;

    button {
        width: 100%;
    }
}
</style>